<!--首页-->
<template>
  <div class="container">
    <!--顶部图片-->
    <div id="home_photo">
      <img src="../assets/ico_photo/home5.png" />
    </div>

    <!--公司介绍区-->
    <el-row type="flex"
            class="row-bg1"
            justify="center">
      <div class="top">
        <div id="top_text">
          <p class="title">
            与<span class="title1_span">瞪羚一起改变世</span>界
          </p>
          <br />
          <p class="title1_p1">
            广西瞪羚科技有限公司是一家集大数据、人工智能、物联网、虚拟实现技术应用开发服务能力的高新技术企业，
            <br />致力于打造成为5G、物联网、人工智能、大数据等数字技术在传统产业研发应用于产业的升级改造。
          </p>
        </div>
      </div>
    </el-row>
    <!--主营业务介绍区-->
    <el-row type="flex"
            class="row-bg2"
            justify="center">
      <div class="box">
        <div>
          <p class="title">主营业务</p>
        </div>
        <div class="business">
          <div class="industry1">
            <div id="business_logo">
              <img @click="jieshao_btn(6)"
                   :class="{anim_fade_image:isShow}"
                   src="http://www.lzfxkj.com/templets/1/webSite_20200708//images/1.png" />
            </div>
          </div>
          <div class="industry2">
            <div id="business_logo">
              <img @click="jieshao_btn(5)"
                   :class="{anim_fade_image:isShow}"
                   src="http://www.lzfxkj.com/templets/1/webSite_20200708//images/2.png" />
            </div>
          </div>
          <div class="industry3">
            <div id="business_logo">
              <img @click="jieshao_btn(4)"
                   :class="{anim_fade_image:isShow}"
                   src="http://www.lzfxkj.com/templets/1/webSite_20200708//images/3.png" />
            </div>
          </div>
          <div class="industry4">
            <div id="business_logo">
              <img @click="jieshao_btn(3)"
                   :class="{anim_fade_image:isShow1}"
                   src="http://www.lzfxkj.com/templets/1/webSite_20200708//images/4.png" />
            </div>
          </div>
          <div class="industry5">
            <div id="business_logo">
              <img @click="jieshao_btn(2)"
                   :class="{anim_fade_image:isShow1}"
                   src="http://www.lzfxkj.com/templets/1/webSite_20200708//images/5.png" />
            </div>
          </div>
          <div class="industry6">
            <div id="business_logo">
              <img @click="jieshao_btn(1)"
                   :class="{anim_fade_image:isShow1}"
                   src="http://www.lzfxkj.com/templets/1/webSite_20200708//images/6.png" />
            </div>
          </div>
        </div>
      </div>
    </el-row>
    <!--科技成果展示区-->
    <el-row type="flex"
            class="row-bg3"
            justify="space-between">
      <div id="business_left">
        <!--图片展示-->
        <div id="photo">
          <img :class="{anim_fade_image:isShow2}"
               src="../assets/ico_photo/pic_home.png" />
        </div>
        <!--主要业务简介-->
        <div id="main_business">
          <div id="main_business_text">
            <p class="title">公司主要业务</p>
            <br />
            <p>公共交通检测、&nbsp;建筑工程检测、&nbsp;地质灾害监测、&nbsp;工业人工智能信息化、&nbsp;智慧城市应用、&nbsp;桥梁健康智慧监测、&nbsp;智能行车调度系统开发、&nbsp;3R定制开发等。&nbsp;公司已与各级政府、&nbsp;事业单位、&nbsp;行业龙头企业密切合作，&nbsp;将成为其指定方案供应商和服务商。&nbsp;公司立足南宁并将辐射服务广西全区。</p>
          </div>
        </div>
      </div>
      <!--科技成果简介-->
      <div class="achievements">
        <div id="achievements_text"
             type="flex"
             justify="center">
          <p class="title_p1">
            <span class="title2_span">研发</span>成果
          </p>
          <br />
          <p class="title_chengguo">
            1)硬件产品研发：完成3款传感器产品，在研采集仪产品2款；
            <br />
            <br />2) 软件产品研发：完成“智慧工地平台“产品设计和软件开发，正在进行”防洪一张图项目”的产品设计；
            <br />
            <br />3) 知识产权：已规划知识产权27项，其中发明专利5项、实用新型专利10项、软件著作权12项。目前已申请发明专利1项、实用新型专利6项、软件著作权1项，其他专利正在陆续准备申请；
            <br />
            <br />4) 项目课题申报：申请了青秀区科技计划重大专项（桥梁安全监测预警云平台的研发与应用示范）及重点研发项目（建筑安全云平台的研发与示范）两个课题。完成了企业首席技术官CTO备案。
          </p>
        </div>
      </div>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      isShow: false,
      isShow1: false,
      isShow2: false,
    };
  },
  mounted () {
    window.addEventListener("scroll", this.windowScroll);
  },
  methods: {
    jieshao_btn (id) {
      this.$router.push({
        name: "jsxq",
        query: {
          id: id,
        },
      })
    },
    windowScroll () {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      this.opacity = Math.abs(Math.round(scrollTop)) / 200;
      if (this.opacity >= 1) {
        this.isShow = true;
      }
      this.opacity = Math.abs(Math.round(scrollTop)) / 600;
      if (this.opacity >= 1) {
        this.isShow1 = true;
      }
      this.opacity = Math.abs(Math.round(scrollTop)) / 1100;
      if (this.opacity >= 1) {
        this.isShow2 = true;
      }
    },
    destroyed () {
      window.removeEventListener("scroll", this.windowScroll); //销毁滚动事件
    },
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.title {
  font-size: 2rem;
  /*  font-size: 3.5vh; */
  letter-spacing: 2px;
}
p {
  font-size: 15px;
  /* font-size: 2vh; */
}
h4 {
  font-size: 1rem;
  /* font-size: 2.5vh; */
}
div {
  overflow-y: hidden !important;
}
.container img {
  width: 100%;
}
.container {
  width: 100%;
  /* min-width: 469px; */
  min-width: 228px;
  text-align: center;
}
.row-bg0 {
  width: 100%;
  height: auto;
}
#home_photo {
  position: relative;
  width: 100%;
  height: auto;
}
#home_photo img {
  width: 100%;
}
/**公司简介区**/
.top {
  display: grid;
  padding-top: 5vh;
  padding-bottom: 5vh;
  width: 100%;
  text-align: center;
  font-family: "宋体";
  font-weight: bold;
  grid-template-columns: 80%;
  grid-template-rows: 100%;
  justify-content: center;
}
#top_text {
  padding: 0 20%;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  color: #4e4e4e;
}
#top_text h1 {
  font-family: "黑体";
  font-style: normal;
  line-height: 80px;
}
.row-bg2 {
  width: 100%;
  background: #ffffff;
}

/******行业介绍样式区******/
.row-bg2 {
  width: 100%;
  background: #eeeeee;
}
.box {
  display: -ms-grid;
  display: grid;
  width: 80%;
  -ms-grid-columns: 100%;
  -ms-grid-rows: auto auto;
  grid-template-columns: 100%;
  grid-template-rows: auto auto;
  text-align: center;
  justify-content: center;
  padding: 4vh;
}
.business {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 4vh;
}
.business > .industry1 {
  width: 30%;
  min-width: 172px;
  padding: 2vh;
  flex-grow: 1;
}
.business > .industry2 {
  width: 30%;
  padding: 2vh;
  min-width: 172px;
  flex-grow: 1;
}
.business > .industry3 {
  width: 30%;
  padding: 2vh;
  min-width: 172px;
  flex-grow: 1;
}
.business > .industry4 {
  width: 30%;
  padding: 2vh;
  min-width: 172px;
  flex-grow: 1;
}
.business > .industry5 {
  width: 30%;
  padding: 2vh;
  min-width: 172px;
  flex-grow: 1;
}
.business > .industry6 {
  width: 30%;
  padding: 2vh;
  min-width: 172px;
  flex-grow: 1;
}
.anim_fade_image {
  animation: fadeInOut 1s linear alternate forwards;
}
@keyframes fadeInOut {
  0% {
    opacity: 0;
    width: 0%;
  }
  50% {
    opacity: 0.5;
    width: 50%;
  }
  100% {
    opacity: 1;
    width: 100%;
  }
}
#business_logo img {
  opacity: 0;
}
/***主要业务介绍和科技成果介绍区 ***/

.row-bg3 {
  width: 100%;
  background-color: #ffffff;
  flex-wrap: wrap;
}
#business_left {
  width: 70%;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto auto;
  flex-grow: 1;
  background-color: #0c4ab6;
}
#photo {
  width: 100%;
  height: auto;
}
#photo img {
  height: 100%;
  display: block;
  opacity: 0;
}
#main_business {
  padding-top: 5vh;
  padding-bottom: 5vh;
  width: 100%;
  background-color: #0c4ab6;
}
#main_business_text {
  padding: 1vh;
  width: 75%;
  color: #ffffff;
  line-height: 30px;
  text-align: left;
  margin: 0 auto;
}
/**科技成果展示**/
.achievements {
  width: 30%;
  background-color: #3076e5;
  padding-top: 2vh;
  padding-bottom: 2vh;
  min-width: 245px;
  flex-grow: 1;
}
#achievements_text {
  width: 80%;
  margin: 0 auto;
  color: #ffffff;
  line-height: 40px;
  text-align: left;
  flex-grow: 1;
}
.title1_span {
  padding-bottom: 15px;
  border-bottom: 2px solid blue;
}
.title2_span {
  padding-bottom: 10px;
  border-bottom: 2px solid red;
}
.title1_p1 {
  font-size: 22px;
}
.title_chengguo {
  font-size: 16px;
}
.title_p1 {
  font-size: 30px;
  letter-spacing: 2px;
  margin-top: 30px;
}
</style>
